<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 示例</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        #main {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div id="main"></div>

<script src="../lib/layui-v2.6.3/layui.js"></script>
<script src="../js/lay-config.js"></script>
<script src="../js/lay-module/echarts/echarts.js"></script>
<script src="../js/lay-module/echarts/echartsTheme.js"></script>
<script>
    layui.use(['element','jquery'], function(){
        var element = layui.element,
            $ = layui.jquery,
            layer = layui.layer;

        // 初始化 ECharts
        var myChart = echarts.init(document.getElementById('main'));

        $.ajax({
            url: '/type/stats',
            type: 'GET',
            success: function (res){
                if (res.code === 200){
                    var typeVO = res.data

                    // 处理数据
                    var typeNames = typeVO.map(item => item.typeName); // 获取学科类型
                    var numbers = typeVO.map(item => item.number); // 获取对应数量

                    // 图表配置
                    var option = {
                        title: {
                            text: '图书分类数据分析',
                            subtext: '数据来源: ssm图书管理系统数据库分析',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: typeNames
                        },
                        series: [
                            {
                                name: '图书分类数据分析',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{b}: {d}%'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '16',
                                        fontWeight: 'bold'
                                    }
                                },
                                data: typeNames.map((name, index) => ({
                                    value: numbers[index], // 使用对应的数量
                                    name: name // 使用对应的学科类型
                                })),
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);
                }else {
                    layer.msg("获取数据失败！",{icon:2})
                }
            }
        })

        // // 图表配置
        // var option = {
        //     title: {
        //         text: '图书分类数据分析',
        //         subtext: '数据来源: ssm图书管理系统数据库分析',
        //         left: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item'
        //     },
        //     legend: {
        //         orient: 'vertical',
        //         left: 'left',
        //         data: typeNames
        //     },
        //     series: [
        //         {
        //             name: '图书分类数据分析',
        //             type: 'pie',
        //             radius: ['50%', '70%'],
        //             avoidLabelOverlap: false,
        //             label: {
        //                 show: true,
        //                 position: 'outside',
        //                 formatter: '{b}: {d}%'
        //             },
        //             emphasis: {
        //                 label: {
        //                     show: true,
        //                     fontSize: '16',
        //                     fontWeight: 'bold'
        //                 }
        //             },
        //             data: typeNames.map((name, index) => ({
        //                 value: numbers[index], // 使用对应的数量
        //                 name: name // 使用对应的学科类型
        //             })),
        //             itemStyle: {
        //                 borderRadius: 10,
        //                 borderColor: '#fff',
        //                 borderWidth: 2
        //             }
        //         }
        //     ]
        // };
        //
        // // 使用刚指定的配置项和数据显示图表
        // myChart.setOption(option);
    });
</script>

</body>
</html>